<template>
	<view class="container">
		<view class="navbar">
			<button type="default" plain class="talk-btn">
				<image src="/static/images/order/order_icon_talk2.0.png"></image>
				<view>     </view>
			</button>
		</view>

		<view class="tabbar">
			<view class="item" :class="{active: !tabIndex}" @tap="switchTab(0)">当前订单</view>
			<view class="item" :class="{active: tabIndex}" @tap="switchTab(1)">历史订单</view>
		</view>

		<view v-if="!tabIndex" class="order-list">
			<view class="no-order-content" v-if="currentOrders.length === 0">
				<image src="https://go.cdn.heytea.com/storage/ad/2020/05/20/0bdb360866d94aa4a4404c0b676a1982.jpg"></image>
				<view class="tips">
					<view>您今天还没有下单</view>
					<view>快去选择一杯属于你的茶吧</view>
				</view>
				<button type="primary" class="font-size-lg" hover-class="none" @tap="goOrder">去下单</button>
			</view>
      <!-- 微信小程序 -->
<!--      <view class="ad-view">-->
<!--        <ad unit-id="adunit-c7a46226c8ce1d86" ad-intervals="100"></ad>-->
<!--      </view>-->

			<t-refresh v-else ref="refresh" @refresh="refresh"  @loadMore="loadMore" :loadingType="loadingType">

			    <template  slot="content">
            <view v-for="(order, index) in currentOrders" :key="index" >
              <navigator class="order"  open-type="navigate" :url="'/pages/order/detail?id=' + order.id">
                <view class="header">
                  <view class="left">
                    <view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">{{ order.zzjgName }}</view>
                    <view v-if="order.status == 20
								|| orders.status==50
								|| orders.status == 40
								|| orders.status==30" class="flex-fill " style="color: orange;margin-bottom: 0.3rem;letter-spacing: 4rpx;font-size: 25rpx">取茶码:{{order.specOrder}}</view>
                    <view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">{{ parseTime(order.gmtCreate) }}</view>
                  </view>

                  <view class="status">
                    <view style="width: 300rpx;    margin-top: -0.1rem; color: orange;
    display: inline;
    text-align: right;">{{ getCpay(timeSet[index],order.status)}}</view>
                    <view style="    width: 88rpx;text-align: right;float: right;margin-right: -12rpx;margin-top: -3rpx">
                      {{statusObj[order.status] }}</view>
                    <image src="/static/images/common/black_arrow_right.png"></image>
                  </view>
                </view>
                <scroll-view scroll-x>
                  <view class="images" v-for="(item, index) in order.skuList">
                    <image class="imageStyle" :src="item.img"  :key="index"></image>
                    <view class="flex-fill d-flex flex-column" style="margin-top: -0.2rem;margin-left: 0.5rem;">
                      <view class="font-size-base mb-10">{{ item.title }}</view>
                      <view class="font-size-extra-sm text-color-assist">
                        {{ item.specification }}
                      </view>
                    </view>
                  </view>

                </scroll-view>

                <view class="info ">
                  <view class="left info-spec">
                    <view>备注：{{ order.mono==null?"":order.mono }}</view>
                    <!--			        			<view>下单时间：{{ order.gmtCreate }}</view>-->
                  </view>
                  <view class="right">

                    <view class="left">
                      <view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">￥{{ (order.actualPrice / 100).toFixed(2) }}</view>
                      <view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">共{{ (order.skuList==null||order.skuList.length==0)?1:order.skuList.length}}件</view>
                    </view>
                  </view>

                </view>

                <view class="action">
                  <button type="default" hover-class="none" v-if="order.status ===  10" @click.stop="payFuncNow(order)">立即支付</button>
                  <button type="default" hover-class="none" v-if="order.status ===  10" @click.stop="cancelFunc(order)">取消订单</button>
                  <button type="default" hover-class="none" v-if="order.status ===  20 || order.status ===  30" @click.stop="refoudFunc(order)">发起退款</button>
                  <!-- <button type="default" hover-class="none">查看评论</button> -->
                  <!-- <button type="primary" plain hover-class="none">再来一单</button> -->
                </view>
              </navigator>
            </view>
      

			    </template>
			</t-refresh>
			
		</view>
		<view v-else  class="order-list">
			<t-refresh ref="refresh2" @refresh="refresh2"  @loadMore="loadMore2" :loadingType="loadingType2">
			    <template  slot="content">
			        <navigator class="order" v-for="(order, index) in orders" :key="index" open-type="navigate" :url="'/pages/order/detail?id=' + order.id">
			        	<view class="header">
							<view class="left">
								<view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">{{ order.zzjgName }}</view>
								<view v-if="order.status >= 20 && orders.status<=50" class="flex-fill " style="color: orange;margin-bottom: 0.3rem;letter-spacing: 4rpx;font-size: 25rpx">取茶码:{{order.specOrder}}</view>
								<view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">{{ formatTime(order.gmtCreate,true) }}</view>
							</view>
<!--			        		<view class="status">-->
<!--			        			<view>{{formatTime(order.gmtCreate,true) +':'+ statusObj[order.status] }}</view>-->
<!--			        			<image src="/static/images/common/black_arrow_right.png"></image>-->
<!--			        		</view>-->
							<view class="status">
<!--								<view style="  margin-top: 0.1rem; color: orange;-->
<!--                                    display: inline;-->
<!--                                    text-align: right;">{{ formatTime(order.gmtCreate,true)}}</view>-->
								<view style="    width: 188rpx;text-align: right;float: right;margin-right: -12rpx;margin-top: -3rpx">
									{{statusObj[order.status] }}</view>
								<image src="/static/images/common/black_arrow_right.png"></image>
							</view>
			        	</view>
			        	<scroll-view scroll-x>
			        		<view class="images">
			        			<image class="imageStyle" :src="item.img" v-for="(item, index) in order.skuList" :key="index"></image>
			        		</view>
			        	</scroll-view>
			        	<view class="info">
			        		<view class="left info-spec">
								<view>备注：{{ order.mono==null?"":order.mono }}</view>
<!--			        			<view>订单编号：{{ order.orderNo }}</view>-->
<!--			        			<view>下单时间：{{ order.gmtCreate }}</view>-->
			        		</view>
							<view class="right">

								<view class="left">
									<view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">￥{{ (order.actualPrice / 100).toFixed(2) }}</view>
									<view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">共{{ (order.skuList==null||order.skuList.length==0)?1:order.skuList.length}}件</view>
								</view>
							</view>
			        	</view>
			        	<!-- <view class="action"> -->
			        		<!-- <button type="default" hover-class="none">取消订单</button> -->
			        		<!-- <button type="default" hover-class="none">查看评论</button> -->
			        		<!-- <button type="primary" plain hover-class="none">再来一单</button> -->
			        	<!-- </view> -->
			        </navigator>
			    </template>
			</t-refresh>
		</view>
		<!-- <image src="https://go.cdn.heytea.com/storage/ad/2020/05/20/1a389117c2fb44d5bcad4a910a68246c.jpg"></image> -->
		<!-- 登录popup -->
		<login-popup ref="loginPopup" :auto="true" @reGet="reGetList"></login-popup>
	</view>
</template>

<script>
	import loginPopup from '../my/components/login-popup.vue'
	import tRefresh from "@/components/t-refresh/t-refresh.vue"
export default {
	components: {
		loginPopup,
		tRefresh
	},
	data() {
		return {
			scheduleFlag:[],
			timeSet:[],//时间数组
			tabIndex: 0,
			orderMenuIndex: 0,
			orders: [],
			currentOrders: [],
			storeOrders: [],
			pageSize: 6,
			// 历史订单的分页
			pageNo: 1,
			pageNo2: 1,
			userId: "",
			loadingType: 0,
			loadingType2: 0,
			statusObj: {
				10: "待支付",
				20: "待制作",
				30:　"待收货",
				40: "待评价",
				50: "已完成",
				60: "退款中",
				70: "已退款",
				80: "已取消",
				90: "已取消（系统）"
			}
		}
	},
	deactivated(){
		for(let timerFlag of this.scheduleFlag){
			clearInterval(timerFlag)
		}
	},
	onShow(){
		for(let timerFlag of this.scheduleFlag){
			clearInterval(timerFlag)
		}
		 let timerFlag  = setInterval(()=>{
			console.log("timeSet",this.timeSet.length)
			for(let [index,time] of this.timeSet.entries()){
				this.$set(this.timeSet,index,time-200)
			}
		},1000)
		this.scheduleFlag.push(timerFlag)
	},
	onHide(){
		for(let timerFlag of this.scheduleFlag){
			clearInterval(timerFlag)
		}
	},
	async onLoad() {
		for(let timerFlag of this.scheduleFlag){
			clearInterval(timerFlag)
		}
		this.userId = uni.getStorageSync("userId");
		if (this.userId) {
			this.getList();
		}


	},
	computed: {
		batchInvoiceVisible() {
			return (!this.orderMenuIndex && this.orders.length) || (this.orderMenuIndex && this.storeOrders.length)
		},
		status() {
			if (this.tabIndex) {
				return [40, 50, 70, 80, 90];
			}
			return [10, 20, 30, 60];
		}
	},
	mounted(){

	},
	// onPullDownRefresh: function() {
	// 	console.log('下拉刷新')
	// 	// this.initListData()
	// 	// this.queryList()
	// },
	// onReachBottom: function() {
	// 			console.log('上拉加载')
	// 			// if (this.finished) {
	// 			// 	return
	// 			// }
	// 			// this.currPage++
	// 			// this.queryList()
	// 		},
	watch: {
		currentOrders(newVal, oldVal) {
			console.log(newVal, oldVal);
		}
	},
	methods: {
		isCanPay(order){
			console.log("asdf")
		},
		getCpay(time,status){
			var nowTime = new Date();//获取当前时间
			if(status !=10){
				return '';
			}
			if(time==undefined){
				return "0分钟0秒";
			}
			//创建目标日期
			var endTimeDate = new Date(time);
			if((nowTime.getTime()-endTimeDate.getTime()-5*60)>(30*60)){
				return "";
			}
			var endTime = endTimeDate.setMinutes(endTimeDate.getMinutes())
			var seconds = parseInt((endTime - nowTime.getTime()) / 1000);//两个时间点的时间差(秒)
			var d = parseInt(seconds / 3600 / 24);//得到天数
			var h = parseInt(seconds / 3600 % 24);//小时
			var m = parseInt(seconds / 60 % 60);//分钟
			var s = parseInt(seconds % 60);//秒
			// if(d<0||h<0||m<0||s<0){
			// 	return "0:00";
			// }
			if(d==0&&h==0&&m==0){
				return s + "秒";
			}
			if(d==0&&h==0){
				return m + "分钟" + s + "秒";
			}
			if(d==0){
				return h+"小时"+m + "分钟" + s + "秒";
			}
			 return h+"小时"+m + "分钟" + s + "秒";


		},
		parseTime(timeStr, cFormat) {
			let time = new Date(timeStr);
			if (arguments.length === 0) {
				return null
			}
			const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'

			let date
			if (typeof time === 'object') {
				date = time
			} else {
				if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
					time = parseInt(time)
				}
				if ((typeof time === 'number') && (time.toString().length === 10)) {
					time = time * 1000
				}
				date = new Date(time)
			}
			const formatObj = {
				y: date.getFullYear(),
				m: date.getMonth() + 1,
				d: date.getDate(),
				h: date.getHours(),
				i: date.getMinutes(),
				s: date.getSeconds(),
				a: date.getDay()
			}
			const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
				let value = formatObj[key]
				// Note: getDay() returns 0 on Sunday
				if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
				if (result.length > 0 && value < 10) {
					value = '0' + value
				}
				return value || 0
			})
			return time_str
		},
		reGetList(){
			this.getList(111)
		},
		// 立即支付
		payFuncNow(row) {
			const that = this;
			uni.showLoading({
				title: '加载中...'
			});
			console.log("row",row)
			that.$api.ajax({
				url: "/web/app-order/wx-prepay-get-pre",
				data: {
					orderNo: row.orderNo,
					parentOrderNo: row.parentOrderNo,
				},
				method: "get",
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				success(res) {
					const { data } = res.data || {};

					const { appId, nonceStr, packageValue, paySign, signType, timeStamp } = data || {};
					uni.hideLoading();
					wx.requestPayment(
							{
								"timeStamp": timeStamp,
								"nonceStr": nonceStr,
								"package": packageValue,
								"signType": signType,
								"paySign": paySign,
								'success':function(res){
									that.$api.msg("支付成功");
									uni.reLaunch({
										url: '/pages/order/order'
									})
								},
								'fail':function(res){
									that.$api.msg("支付失败");
									console.log(res, 198);
								},
								'complete':function(res){
									console.log(res, 201);
								}
							})
				}
			});
		},
		// 立即支付
		payFunc(row) {
			const that = this;
			uni.showLoading({
			    title: '加载中...'
			});
			console.log("row",row)
			that.$api.ajax({
				url: "/web/app-order/wx-prepay",
				data: {
					orderNo: "",
					parentOrderNo: row.parentOrderNo,
					ip: "192.168.30.111",
					zzjgId: 2,
					userId: uni.getStorageSync("userId")
				},
				method: "post",
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				success(res) {
					const { data } = res.data || {};

					const { appId, nonceStr, packageValue, paySign, signType, timeStamp } = data || {};
					uni.hideLoading();
					wx.requestPayment(
					{
					"timeStamp": timeStamp,
					"nonceStr": nonceStr,
					"package": packageValue,
					"signType": signType,
					"paySign": paySign,
					'success':function(res){
						that.$api.msg("支付成功");
						uni.reLaunch({
							url: '/pages/order/order'
						})
					},
					'fail':function(res){
						that.$api.msg("支付失败");
						console.log(res, 198);
					},
					'complete':function(res){
						console.log(res, 201);
					}
					})
				}
			});
		},
		// 发起退款
		refoudFunc(row) {
			let that = this;
			uni.showModal({
			    title: '提示',
			    content: '您确定要发起退款？',
			    success: function (res) {
			        if (res.confirm) {
						uni.showLoading({
						    title: '加载中...'
						});
			            that.$api.ajax({
			            	url: "/web/app-order/refund",
			            	// method: "post",
			            	data: {
			            		orderNo: row.orderNo,
								reason: "",
			            		userId: uni.getStorageSync("userId")
			            	},
			            	success: (res) => {
			            		// 成功
								that.$api.msg("退款处理中");
								uni.reLaunch({
									url: '/pages/order/order'
								})
			            	},
							fail: (res) => {
								that.$api.msg("发起退款失败");
							},
							complete: (res) => {
								uni.hideLoading();
							}
			            });
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		// 取消订单
		cancelFunc(row) {
			// /web/app-order/cancel
			let that = this;
			uni.showModal({
			    title: '提示',
			    content: '您确定要取消该订单？',
			    success: function (res) {
			        if (res.confirm) {
						uni.showLoading({
						    title: '取消中...'
						});
			            that.$api.ajax({
			            	url: "/web/app-order/cancel",
			            	// method: "post",
			            	data: {
			            		orderNo: row.orderNo,
			            		userId: uni.getStorageSync("userId")
			            	},
			            	success: (res) => {
			            		// 成功
								that.$api.msg("订单取消成功");
								uni.reLaunch({
									url: '/pages/order/order'
								})
			            	},
							fail: (res) => {
								that.$api.msg("订单取消失败");
							},
							complete: (res) => {
								uni.hideLoading();
							}
			            });
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		// 加载更多 
	async loadMore() {
		  //loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
		if(this.loadingType==0){
			this.loadingType=2
			//模拟数据请求
			this.pageNo++;
			this.getList();
		}
	},
		            //刷新
	async refresh(e){
			//模拟数据请求
			this.pageNo = 1;
			this.getList(111);
		},
		getList(flag) {
			uni.showLoading({
				title: '加载中',
				mask:true
			});
			// POST /web/app-order/get-order-page
			const { pageNo, pageSize, userId, status } = this;
			this.$api.ajax({
				url: "/web/app-order/get-order-page-status",
				// method: "post",
				data: {
					status: status.join(","),
					pageNo,
					pageSize,
					userId
				},
				success: (res) => {
					const { data } = res.data || {};
					const { items } = data || {};
					console.log("abc",res)
					if(res.data.status == 403||res.data.code == 403) {
            uni.hideLoading()
						 this.$refs['loginPopup'].open()
					}
					console.log(this.items)
					//this.timeSet = [];//置空时间集合
					//开始创建定时器
					let originLength = this.timeSet.length;
					for(let [index,order] of items.entries()){
						let startTime = order.gmtCreate
						let date = new Date(startTime)
						let fDate = date.setMinutes(date.getMinutes()+5);
						this.$set(this.timeSet,originLength+index,fDate)
					}



					if (flag === 111) {
						console.log("asdf")
						this.currentOrders = [];
						this.timeSet=[]
						for(let [index,order] of items.entries()){
							let startTime = order.gmtCreate
							let date = new Date(startTime)
							let fDate = date.setMinutes(date.getMinutes()+5);
							this.$set(this.timeSet,index,fDate)
						}
						this.currentOrders = [...this.currentOrders, ...(items || [])];
						console.log("curentOrders",this.currentOrders)
						this.$nextTick(() => {
							try{
								this.$refs.refresh.endRefresh()
							}catch(e){
								//TODO handle the exception
							}
							
						})
						
						this.loadingType=0
						uni.hideLoading()
						return;
					}
					this.currentOrders = [...this.currentOrders, ...(items || [])];
					if ((items || []).length < pageSize) {
						this.loadingType=1;
					} else {
						this.loadingType = 0;
					}
					uni.hideLoading()
				}
			});
		},
		async loadMore2() {
			console.log(350)
		                //loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
		                if(this.loadingType2==0){
		                    this.loadingType2=2
		                    //模拟数据请求
		                    this.pageNo2++;
							this.getList2();
		                }
		            },
		            //刷新
		            async refresh2(e){  
		                //模拟数据请求
		                this.orders = [];
						this.pageNo2 = 1;
						this.getList2(111);
		            },
		getList2(flag) {
			// POST /web/app-order/get-order-page
			const { pageNo2, pageSize, userId, status } = this;
			this.$api.ajax({
				url: "/web/app-order/get-order-page-status",
				// method: "post",
				data: {
					status: status.join(","),
					pageNo: pageNo2,
					pageSize,
					userId
				},
				success: (res) => {
					const { data } = res.data || {};
					const { items } = data || {};
					if (flag === 111) {
						this.orders = [...this.orders, ...(items || [])];
						this.$nextTick(() => {
							try{
								this.$refs.refresh2.endRefresh()
							}catch(e){
								//TODO handle the exception
							}
						})
						
						this.loadingType2=0
						return;
					}
					this.orders = [...this.orders, ...(items || [])];
					if ((items || []).length < pageSize) {
						this.loadingType2=1;
					} else {
						this.loadingType2 = 0;
					}
				}
			});
		},
		// /web/coldOrder/getOrderList
		goOrder() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		async switchTab(index) {
			if(this.tabIndex === index) return
			this.tabIndex = index
			this.orders = [];
			this.currentOrders = [];
			this.pageNo = 1;
			this.pageNo2 = 1;
			this.loadingType = 0;
			this.loadingType2 = 0;
			if(this.tabIndex) {
				this.getList2();
				
			} else {
				this.getList()
			}
		},
		handleSwiperItemChange() {	//禁止手动滑动
			return true
		},
		async switchMenuTab(index) {
			if(this.orderMenuIndex === index) return
			this.orderMenuIndex = index
			await this.getOrders()
		},
		async getOrders() {
			// 获取历史订单
			this.$api.ajax({
				url: "/web/coldOrder/getOrderList",
				data: {
					openId: uni.getStorageSync("openId")
				},
				method: "get",
				success: (res) => {
					// console.log(res);
					this.orders = res.data.data.list || [];
					// 订单的id
					// data
				}
			});
			// if(!this.orderMenuIndex) {
			// 	this.orders = await this.$api('orders')
			// } else {
			// 	this.storeOrders = await this.$api('storeOrders')
			// }
		},
		formatTime(timeStr, option) {
			let time = new Date(timeStr)
			if (('' + time).length === 10) {
				time = parseInt(time) * 1000
			} else {
				// time = +time
			}
			// console.log(time, new Date(time))
			const d = new Date(time)
			const now = Date.now()
			const diff = (now - d) / 1000

			if (diff < 30) {
				return '刚刚'
			} else if (diff < 3600) {
				// less 1 hour
				return Math.ceil(diff / 60) + '分钟前'
			} else if (diff < 3600 * 24) {
				return Math.ceil(diff / 3600) + '小时前'
			} else if (diff < 3600 * 24 * 2) {
				return '1天前'
			}
			if (option) {
				return this.parseTime(time)
			} else {
				return (
						d.getMonth() +
						1 +
						'月' +
						d.getDate() +
						'日' +
						d.getHours() +
						'时' +
						d.getMinutes() +
						'分'
				)
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.adContainer {
	  width: 98%;
	  margin: 0 auto;
	}
page {
	background-color: #f6f6f6;
}
.navbar {
	height: calc(44px + var(--status-bar-height));
	/* #ifdef H5 */
	height: 44px;
	/* #endif */
	display: flex;
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999999;
}
.noshow{
	display: none;
}
.talk-btn {
	height: 32px;
	margin-left: 10px;
	margin-top: 26px;
	/* #ifdef H5 */
	margin-top: 6px;
	/* #endif */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: $font-size-sm !important;
	padding: 0 20rpx;
	border-radius: 50rem !important;
	
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: $spacing-row-sm;
	}
}
.imageStyle{
	width: 40px!important;
	height: 40px!important;
}
.tabbar {
	height: 100rpx;
	background-color: $bg-color-white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	top: calc(44px + var(--status-bar-height));
	left: 0;
	right: 0;
	z-index: 999999;
	.item {
		height: 100%;
		font-size: $font-size-lg;
		color: $text-color-assist;
		font-weight: 400 !important;
		display: flex;
		align-items: center;
		
		&.active {
			color: $text-color-base;
			border-bottom: 4rpx solid $text-color-base;
		}
	}
}

.swiper {
	width: 100%;
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx);
	/* #ifdef H5 */
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx - 100rpx);
	/* #endif */
}

.no-order-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 50rpx;
	}

	.tips {
		color: $text-color-assist;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.2rem !important;
		margin-bottom: 70rpx;
	}

	button {
		width: 50%;
	}
}

.history-order {
	width: 100%;
	height: 100%;
	position: relative;
	
	.menu {
		padding: 18rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: $font-size-base;
		color: $text-color-grey;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		
		.item {
			padding: 14rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			&.active {
				color: $color-primary;
				background-color: $bg-color-white;
			}
		}
	}
	
	.history-order-swiper {
		width: 100%;
		height: 100%;
	}
}

.store-order-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: $font-size-base;
	color: $text-color-assist;
	line-height: 1.3rem !important;
	
	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}

.orders-scroll {
	width: 100%;
	height: 100%;
	padding-top: 104rpx;
}

.order-list {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding-top: calc(100rpx + 44px + var(--status-bar-height));
	.order {
		background-color: $bg-color-white;
		padding: 30rpx 40rpx;
		margin-bottom: 18rpx;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.status {
				font-size: $font-size-base;
				color: $text-color-grey;
				display: flex;
				align-items: center;
				margin-top: -1.7rem;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: $spacing-row-sm;
				}
			}
		}
		
		.images {
			display: flex;
			padding: 30rpx 0;
			image {
				flex-shrink: 0;
				width: 150rpx;
				height: 112.5rpx;
			}
		}
		.info-spec{
			margin-top: -60px;
			margin-bottom: -5.1rem;
		}
		.info {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			margin-top: -0.5rem;
			
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $font-size-base;
				color: $text-color-grey;
			}
			
			.right {
				font-size: $font-size-lg;
				color: $text-color-base;
			}
		}
		
		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			button {
				margin-left: 30rpx;
				font-size: $font-size-sm;
				color: orange !important;
				border: 1px solid orange!important;
				border-radius: 0.5rem;
			}
		}
	}
}
</style>
